<template>
  <div class="body-box">
    <!-- 第三行数据 -->
    <div class="content-box">
      <div class="one">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">实时车辆在线统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_VZ" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="two">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日道路作业完成统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_DW" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="three">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">上月道路作业平均完成率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_DB" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="four">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各类型车辆出动率</span>
            </div>
          </div>
          <div id="WorkOnStandard_GZ" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="five">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日车辆出动情况统计</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 200px"
                ></div> -->
          <div id="WorkOnStandard_VC" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="six">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日洗扫道路作业情况、作业达标情况</span
              >
            </div>
          </div>
          <div id="WorkOnStandard_XS" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div>
      <div class="seven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日洒水道路作业情况、作业达标情况</span
              >
            </div>
          </div>

          <div id="WorkOnStandard_SS" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div>
      <div class="eight">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各标段道路作业完成率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_GC" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="nine">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日扫保面积完成情况统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_VX" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="ten">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">上月道路以克论净得分</span>
              <span class="fs-xl text mx-2" style="margin: 0 15px 0 130px"
                >当前排名： {{ rankingYKLJ }}</span
              >
            </div>
          </div>

          <div id="WorkOnStandard_GX" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="eleven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日机扫道路作业情况、作业达标情况</span
              >
            </div>
          </div>

          <div id="WorkOnStandard_JS" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div>
      <div class="twelve">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日冲洗道路作业情况、作业达标情况
              </span>
            </div>
          </div>

          <div id="WorkOnStandard_CX" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div>

      <div class="thirteen">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div style="width: 100%; height: 190px">
            <el-row :gutter="12" style="margin: 1% 0">
              <el-col :span="20">
                <el-form ref="form" :model="form" class="list">
                  <el-form-item label="">
                    <!-- <el-select
                      size="medium"
                      v-model="ClientNo"
                      placeholder="请选择"
                      @change="changeData"
                      style="width: 900px"
                      :popper-append-to-body="false"
                    >
                      <el-option
                        v-for="item in workList"
                        :key="item.CLIENT_NO"
                        :label="item.CLIENT_NAME"
                        :value="item.CLIENT_NO"
                      >
                      </el-option>
                    </el-select> -->
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin: 1% 0">
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">车辆总数</div>
                  <div class="hd">{{ staticInfo.vehicleAll }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">干扫车</div>
                  <div class="hd">{{ staticInfo.vehicleGS }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">洗路车</div>
                  <div class="hd">{{ staticInfo.vehicleXL }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">洒水车</div>
                  <div class="hd">{{ staticInfo.vehicleSS }}</div>
                </el-card>
              </el-col>
              <!-- </el-row> -->
              <!-- <el-row :gutter="12" style="margin: 2% 0"> -->
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">道路数</div>
                  <div class="hd">{{ staticInfo.roadAll }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">报警数</div>
                  <div class="hd">{{ staticInfo.alert }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">加油数</div>
                  <div class="hd">{{ staticInfo.oil }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">加水数</div>
                  <div class="hd">{{ staticInfo.water }}</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </dv-border-box-7>
      </div>
      <!-- <div class="thirteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >车均报警次数情况统计
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VB"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div> -->
      <!-- <div class="fourteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各街道车均报警次数百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GB"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div> -->
    </div>
  </div>
</template>

<script>
import { optionWorkOnStandard } from '@/components/echart/bar.js'
// import { optionWorkOnStandard2 } from '@/components/echart/bar.js'
import { collectionRate } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
import { spotsNumbe2 } from '@/components/echart/bar.js'
// import { brokenLine } from '@/components/echart/bar.js'
import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      ClientNo: '0000001',
      nowDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      radio1: '上海',
      workList: [],
      rankingYKLJ: '',
      // form: {
      //   userName: 'dlhw',
      //   date: '2020-10',
      //   clientNo: '00000',
      //   vehicleData: [{
      //     排队数: '0',
      //     车辆总数: '0',
      //     出动数: '0',
      //     出动率: '0',
      //   }],
      // },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      staticInfo: {
        vehicleAll: '',
        vehicleGS: '',
        vehicleXL: '',
        vehicleSS: '',
        roadAll: '',
        alert: '',
        oil: '',
        water: '',
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    // this.ClientNo = localStorage.getItem('ClientNo');
    
    this.ClientNo = window.location.href.split('ClientNo=')[1]; 
    this.getInfoList();

    this.timeFn()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {

    // 获取清扫队列表
    async getInfoList () {
      var url = "http://111.160.78.62:9935//api/ECharts/GetClientList"
      let { data } = await this.$Http.get(url);
      this.workList = data;
      // this.ClientNo = data[1].CLIENT_NO
      this.changeData();

      // this.workList = [{
      //   "categories": "00000",
      //   "data": "东丽区"
      // },
      // {
      //   "categories": "0000009",
      //   "data": "河西区"
      // },
      // {
      //   "categories": "000000901",
      //   "data": "津南区"
      // },]
    },
    changeData () {
      this.initStaticInfo()
      this.initWorkOnStandard_SS()
      this.initWorkOnStandard_CX()
      this.initWorkOnStandard_XS()
      this.initWorkOnStandard_JS()
      this.initWorkOnStandard_VZ()
      this.initWorkOnStandard_DW()
      this.initWorkOnStandard_DB()
      this.initWorkOnStandard_GZ()
      this.initWorkOnStandard_GC()
      this.initWorkOnStandard_VC()
      this.initWorkOnStandard_VX()
      this.initWorkOnStandard_GX()
      this.initWorkOnStandard_VB()
      this.initWorkOnStandard_GB()

      this.initWorkRatioByCartype()
    },
    // 区级静态信息
    async initStaticInfo () {
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=&url=EXEC TAQ_GetStatisticsInfo '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      console.log(data)

      this.staticInfo.vehicleAll = data[0].value

      this.staticInfo.vehicleGS = data[1].value
      this.staticInfo.vehicleXL = data[2].value
      this.staticInfo.vehicleSS = data[3].value

      this.staticInfo.roadAll = data[4].value
      this.staticInfo.alert = data[5].value
      this.staticInfo.oil = data[6].value
      this.staticInfo.water = data[7].value
    },
    // 实时车辆在线统计
    async initWorkOnStandard_VZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=&url=EXEC TAQ_GetVehicleOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: [{ "value": data[2].value, "name": "在线：" + data[0].value + "辆" }, { "value": data[3].value, "name": "未在线：" + data[1].value + "辆" }]
        },]
      });
    },
    // 昨日车辆出动情况统计
    async initWorkOnStandard_VC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=&url=EXEC TAQ_GetVehicleWorkInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: [{ "value": data[2].value, "name": "出动：" + data[0].value + "辆" }, { "value": data[3].value, "name": "未出动：" + data[1].value + "辆" }]
        },]
      });
    },
    // 昨日扫保面积完成情况统计
    async initWorkOnStandard_VX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      myChart.setOption({
        series: [{
          data: [{ "value": 33.1, "name": "已完成：130000㎡" }, { "value": 66.9, "name": "未完成：261000㎡" }]
        },]
      });
    },
    // 昨日道路作业完成统计
    async initWorkOnStandard_DW () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DW'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=&url=EXEC TAQ_GetRoadWorkInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: [{ "value": data[2].value, "name": "完成：" + data[0].value + "条" }, { "value": data[3].value, "name": "未完成：" + data[1].value + "条" }]
        },]
      });
    },
    //上月道路以克论净得分
    async initWorkOnStandard_GX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TAQ_GetRoadYKLJWorkInfo '" + this.ClientNo + "'";
      const { data } = await this.$Http.get(url)
      var indexArrSplice = data[0].length - 1
      this.rankingYKLJ = data[1][indexArrSplice]
      myChart.setOption({
        xAxis: {
          data: data[0].splice(0, indexArrSplice)
        },
        series: [{
          data: data[1].splice(0, indexArrSplice)
        }]
      });
    },
    // 昨日各类型车辆出动率
    async initWorkOnStandard_GZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TAQ_GetVehicleWorkInfoByType '" + this.ClientNo + "'";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          axisLabel: {
            interval: 0,
          },
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 上月道路作业平均完成率
    async initWorkOnStandard_DB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TAQ_GetRoadWorkInfoByMonth '" + this.ClientNo + "'";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
        category: ["小区", "饭店", "企业"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=" + this.ClientNo;
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.rateData
        }, {
          data: data.barData
        }, {
          data: data.lineData
        }]

      });
    },




    // 车均报警次数情况统计
    async initWorkOnStandard_VB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },


    //昨日各标段道路作业完成率
    async initWorkOnStandard_GC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleWorkInfo  '" + this.nowDate + "','" +this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["华新标段", "华明标段", "金钟标段"]
        },
        series: [{

          data: ["98", "95.1", "83"]
        }]
      });
    },

    //各街道车均报警次数百分比
    async initWorkOnStandard_GB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },

    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },

    // 昨日洒水道路作业情况、作业达标情况
    async initWorkOnStandard_SS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.ClientNo + "',洒水";
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TAQ_GetRoadWorkInfoByType '" + this.ClientNo + "',洒水";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: ["主干\n道路总数：" + (parseInt(data[1][0]) + parseInt(data[2][0])), "次干\n道路总数：" + (parseInt(data[1][1]) + parseInt(data[2][1])), "支路\n道路总数：" + (parseInt(data[1][2]) + parseInt(data[2][2]))]
        },
        series: [{
          data: data[1]
        }, {
          data: data[2]
        }, {
          data: data[3]
        }, {
          data: data[4]
        }]
      });
    },
    // 昨日冲洗道路作业情况、作业达标情况
    async initWorkOnStandard_CX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TAQ_GetRoadWorkInfoByType '" + this.ClientNo + "',冲洗";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: ["主干\n道路总数：" + (parseInt(data[1][0]) + parseInt(data[2][0])), "次干\n道路总数：" + (parseInt(data[1][1]) + parseInt(data[2][1])), "支路\n道路总数：" + (parseInt(data[1][2]) + parseInt(data[2][2]))]
        },
        series: [{
          data: data[1]
        }, {
          data: data[2]
        }, {
          data: data[3]
        }, {
          data: data[4]
        }]
      });
    },
    // 昨日洗扫道路作业情况、作业达标情况
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TAQ_GetRoadWorkInfoByType '" + this.ClientNo + "',洗扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: ["主干\n道路总数：" + (parseInt(data[1][0]) + parseInt(data[2][0])), "次干\n道路总数：" + (parseInt(data[1][1]) + parseInt(data[2][1])), "支路\n道路总数：" + (parseInt(data[1][2]) + parseInt(data[2][2]))]
        },
        series: [{
          data: data[1]
        }, {
          data: data[2]
        }, {
          data: data[3]
        }, {
          data: data[4]
        }]
      });
    },
    //昨日机扫道路作业情况、作业达标情况
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TAQ_GetRoadWorkInfoByType '" + this.ClientNo + "',机扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: ["主干\n道路总数：" + (parseInt(data[1][0]) + parseInt(data[2][0])), "次干\n道路总数：" + (parseInt(data[1][1]) + parseInt(data[2][1])), "支路\n道路总数：" + (parseInt(data[1][2]) + parseInt(data[2][2]))]
        },
        series: [{
          data: data[1]
        }, {
          data: data[2]
        }, {
          data: data[3]
        }, {
          data: data[4]
        }]
      });
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-box {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(8, 11.8%);
  grid-template-areas:
    'one thirteen thirteen ten'
    'one thirteen thirteen ten'
    'five six seven four'
    'five six seven four'
    'nine six  seven eight'
    'nine eleven  twelve eight'
    'two eleven twelve three'
    'two eleven twelve three';
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8, 48, 74, 0.5);
}

.two {
  margin: 5px;
  grid-area: two;
  background: rgba(8, 48, 74, 0.5);
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8, 48, 74, 0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8, 48, 74, 0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8, 48, 74, 0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8, 48, 74, 0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8, 48, 74, 0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8, 48, 74, 0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8, 48, 74, 0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8, 48, 74, 0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8, 48, 74, 0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8, 48, 74, 0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8, 48, 74, 0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8, 48, 74, 0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
// .list {
//   // position: absolute;
//   right: 1%;
//   // top: 25px;
// }
</style>
